<template>
	<view class="auth-page">
		<!-- 导航栏 -->
		<view class="nav-bar">
			<uni-icons type="back" size="20" color="#00C48C" @click="onBack"></uni-icons>
			<text class="nav-title">医生认证</text>
		</view>

		<!-- 表单容器 -->
		<view class="form-container">
			<!-- 医院选择 -->
			<view class="form-group">
				<text class="group-title">医院选择</text>
				<uni-data-select v-model="hospitalValue" :localdata="hospitalOptions" placeholder="下拉选择医院" border="none"
					class="custom-select" :class="{ 'error-border': errors.hospital }" />
				<text v-if="errors.hospital" class="error-text">请选择医院</text>
			</view>

			<!-- 科室选择 -->
			<view class="form-group">
				<text class="group-title">科室选择</text>
				<uni-data-select v-model="departmentValue" :localdata="departmentOptions" placeholder="下拉选择科室"
					border="none" class="custom-select" :class="{ 'error-border': errors.department }" />
				<text v-if="errors.department" class="error-text">请选择科室</text>
			</view>

			<!-- 职称级别 -->
			<view class="form-group">
				<text class="group-title">职称级别</text>
				<uni-data-select v-model="titleValue" :localdata="titleOptions" placeholder="职称" border="none"
					class="custom-select" :class="{ 'error-border': errors.title }" />
				<text v-if="errors.title" class="error-text">请选择职称</text>
			</view>

			<!-- 擅长领域 -->
			<view class="form-group">
				<text class="group-title">擅长领域</text>
				<input type="text" class="input-field" :class="{ 'error-border': errors.expertise }"
					placeholder="请输入您擅长的领域" placeholder-style="color:#CFCFCF;" v-model="expertiseValue" />
				<text v-if="errors.expertise" class="error-text">请输入擅长领域</text>
			</view>

			<!-- 姓名（只读） -->
			<view class="form-group read-only">
				<text class="group-title">姓名</text>
				<input type="text" placeholder="显示姓名（姓名和身份证号无法修改）" v-model="nameValue"  />
			</view>

			<!-- 居民身份证（只读） -->
			<view class="form-group read-only">
				<text class="group-title">居民身份证</text>
				<input type="text" placeholder="4500000000000000" v-model="idCardValue" />
			</view>

			<!-- 申请按钮 -->
			<button class="submit-btn" @click="submitAuth">申请认证</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue';

	// 错误信息
	const errors = reactive({
		hospital: false,
		department: false,
		title: false,
		expertise: false
	});

	// 表单数据
	const hospitalValue = ref('');
	const departmentValue = ref('');
	const titleValue = ref('');
	const expertiseValue = ref('');

	// 用户信息（模拟数据）
	const nameValue = ref('');
	const idCardValue = ref('');

	// 下拉选项数据
	const hospitalOptions = ref([
		{ text: '三甲医院A', value: 'hospital-a' },
		{ text: '三甲医院B', value: 'hospital-b' },
		{ text: '二甲医院C', value: 'hospital-c' },
	]);
	const departmentOptions = ref([
		{ text: '内科', value: 'internal' },
		{ text: '外科', value: 'surgery' },
		{ text: '儿科', value: 'pediatrics' },
	]);
	const titleOptions = ref([
		{ text: '初级职称', value: 'junior' },
		{ text: '中级职称', value: 'middle' },
		{ text: '高级职称', value: 'senior' },
	]);

	// 表单验证
	const validateForm = () => {
		let isValid = true;

		// 重置错误状态
		errors.hospital = false;
		errors.department = false;
		errors.title = false;
		errors.expertise = false;

		// 检查医院
		if (!hospitalValue.value) {
			errors.hospital = true;
			isValid = false;
		}

		// 检查科室
		if (!departmentValue.value) {
			errors.department = true;
			isValid = false;
		}

		// 检查职称
		if (!titleValue.value) {
			errors.title = true;
			isValid = false;
		}

		// 检查擅长领域
		if (!expertiseValue.value.trim()) {
			errors.expertise = true;
			isValid = false;
		}

		return isValid;
	};

	// 提交认证
	const submitAuth = () => {
		// 表单验证
		if (!validateForm()) {
			uni.showToast({
				title: '请完善表单信息',
				icon: 'none',
				duration: 2000
			});
			return;
		}

		// 模拟提交到服务器
		setTimeout(() => {
			uni.showToast({
				title: '认证申请已提交',
				icon: 'success',
				duration: 1500
			});

			// 1.5秒后返回上一页
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		}, 500);
	};

	// 返回上一页
	const onBack = () => {
		uni.navigateBack();
	};
</script>

<style scoped>
	/* 页面基础样式 */
	.auth-page {
		background-color: #F5F5F5;
		min-height: 100vh;
		padding-top: 90rpx;
		box-sizing: border-box;
	}

	/* 导航栏 */
	.nav-bar {
		display: flex;
		align-items: center;
		height: 44px;
		padding: 0 16px;
		background-color: #FFFFFF;
		border-bottom: 1px solid #EEE;
	}

	.nav-title {
		margin-left: 8px;
		font-size: 18px;
		font-weight: bold;
		color: #00C48C;
	}

	/* 表单容器 */
	.form-container {
		margin: 12px;
		padding: 16px;
		background-color: #FFFFFF;
		border-radius: 8px;
	}

	/* 表单分组 */
	.form-group {
		margin-bottom: 24px;
		position: relative;
	}

	.group-title {
		font-size: 16px;
		color: #333;
		font-weight: 500;
		margin-bottom: 8px;
		display: block;
	}

	/* 错误提示文本 */
	.error-text {
		position: absolute;
		bottom: -18px;
		left: 0;
		font-size: 12px;
		color: #ff0000;
	}

	/* 错误边框 */
	.error-border {
		border: 1px solid #ff0000 !important;
	}

	/* 自定义下拉选择器样式 */
	.custom-select {
		width: 100%;
	}

	/* 输入框样式 */
	::v-deep .uni-data-select__input {
		height: 36px !important;
		border: 1px solid #00C48C !important;
		border-radius: 4px !important;
		padding: 0 12px !important;
		font-size: 14px !important;
		color: #333 !important;
	}

	/* 占位符颜色 */
	::v-deep .uni-data-select__input::placeholder {
		color: #CFCFCF !important;
	}

	/* 下拉箭头颜色 */
	::v-deep .uni-data-select__icon {
		color: #00C48C !important;
	}

	/* 擅长领域输入框 */
	.input-field {
		height: 36px;
		border: 1px solid #00C48C;
		border-radius: 4px;
		padding: 0 12px;
		font-size: 14px;
		color: #333;
	}

	/* 只读项样式 */
	.read-only .group-title {
		margin-bottom: 4px;
	}

	.read-only-text {
		font-size: 14px;
		color: #999;
		display: block;
	}

	/* 申请按钮 */
	.submit-btn {
		width: 100%;
		height: 44px;
		background-color: #00C48C;
		color: #FFFFFF;
		font-size: 16px;
		border-radius: 22px;
		margin-top: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 按钮激活状态 */
	.submit-btn:active {
		background-color: #00a375;
	}

	/* 清除uni-app按钮默认边框 */
	.submit-btn::after {
		border: none;
	}
</style>